<template>
	<view class="confirmOrder">
		<view class="order-status">等待支付</view>
		<navigator class="address" v-if="addressInfo.id" url="../../mine/addressManage/addressManage?from='order'">
			<view class="">姓名: {{ addressInfo.name }} 电话号码:{{ addressInfo.phoneNumber }}</view>
			<view class="">收货地址: {{ addressInfo.province }}-{{ addressInfo.city }}-{{ addressInfo.region }}{{ addressInfo.detailAddress }}</view>
		</navigator>
		<navigator class="empty-address" url="../../mine/addressManage/addressManage?from='order'" v-else>请选择地址</navigator>
		<view class="product-list">
			<view class="title">
				<text>订单编号: {{ orderInfo.orderSn }}</text>
				<text>等待支付</text>
			</view>

			<view class="item" v-for="item in orderItems" :key="item.id">
				<image :src="item.productPic" mode="" class="icon"></image>
				<view class="product-info">
					<view class="name">{{ item.productName }}</view>
					<view class="skuId">编号:{{ item.productSkuId }}</view>
					<view class="spec">
						规格:
						<text v-for="item in JSON.parse(item.productAttr)" class="spec-item">{{ item.key }} {{ item.value }}</text>
					</view>
				</view>
				<view class="price-num">
					<view class="price">￥{{ item.productPrice }}元</view>
					<view class="num">x {{ item.productQuantity }}</view>
				</view>
			</view>
			<view class="footer">
				<view class="totalAmount">合计: {{ orderInfo.totalAmount }}元</view>
				<view class="btn"><view class="paymentBtn" @tap="handleConfirmOrder">确认付款</view></view>
			</view>
		</view>
	</view>
</template>

<script>
import { getPreOrderById, addConfirmOrder } from '../../../api/order/confirmorder/index.js';
export default {
	data() {
		return {
			orderId: '',
			orderInfo: {}, // 订单信息
			orderItems: [], // 商品列表
			addressInfo: {} // 地址
		};
	},
	methods: {
		// 获取订单信息
		async getOrderInfo() {
			const { success, data } = await getPreOrderById(this.orderId);
			if (success) {
				this.orderInfo = data.orderBase;
				this.orderItems = data.orderItems;
			} else {
				uni.showToast({
					title: '获取订单信息失败',
					icon: 'error'
				});
			}
		},
		// 获取地址
		getAddress() {
			let addr = uni.getStorageSync('address');
			if (addr) {
				this.addressInfo = addr;
			}
		},
		// 确认订单
		async handleConfirmOrder() {
			if (!this.addressInfo.id) {
				uni.showToast({
					title: '请先选择地址',
					icon: 'error'
				});
				return;
			}
			const { success, massage, data } = await addConfirmOrder({
				orderId: this.orderId,
				addressId: this.addressInfo.id,
				orderItemList: this.orderItems.map(item => {
					return {
						cartId: item.id,
						productId: item.productId,
						productQuantity: item.productQuantity,
						productSkuId: item.productSkuId
					};
				}),
				payType: 0,
				sourceType: 1
			});
			if (success) {
				uni.navigateTo({
					url: `/pages/payment/payment?id=${data.orderId}`
				});
			} else {
				uni.showToast({
					title: massage,
					icon: 'error'
				});
			}
		}
	},
	onLoad(options) {
		console.log(options);
		this.orderId = options.id;
		this.getOrderInfo();
	},
	onShow() {
		this.getAddress();
	}
};
</script>

<style lang="scss" scoped>
.confirmOrder {
	.order-status {
		font-size: 36rpx;
		color: #494949;
		height: 88rpx;
		border-bottom: 2rpx solid #ccc;
		line-height: 88rpx;
		margin: 0 60rpx;
		box-sizing: border-box;
	}
	.empty-address,
	.address {
		font-size: 28rpx;
		color: #494949;
		border-bottom: 2rpx solid #ccc;
		margin: 0 60rpx;
		box-sizing: border-box;
		padding: 30rpx 0;
	}
	.product-list {
		width: 672rpx;
		box-sizing: border-box;
		padding: 36rpx;
		border-radius: 24rpx;
		background-color: #fff;
		margin: 30rpx auto;
		font-size: 24rpx;
		color: #3e3e3e;
		.title {
			display: flex;
			justify-content: space-between;
			padding-bottom: 30rpx;
			border-bottom: 2rpx solid #f1ece7;
		}
		.item {
			padding: 30rpx 0;
			display: flex;
			border-bottom: 2rpx solid #f1ece7;
			.icon {
				width: 162rpx;
				height: 162rpx;
			}
			.product-info {
				flex: 1;
				margin: 0 20rpx;
				.name {
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
					color: #3e3e3e;
					margin-top: 20rpx;
				}
				.skuId {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #8d8d8d;
					font-size: 22rpx;
					margin-top: 20rpx;
				}
				.spec {
					color: #8d8d8d;
					font-size: 22rpx;
					margin-top: 20rpx;
					.spec-item {
						margin-left: 10rpx;
					}
				}
			}

			.price-num {
				max-width: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-end;
				text-align: right;
				margin-top: 20rpx;
			}
		}
	}
	.footer {
		text-align: right;
		.totalAmount {
			margin-top: 20rpx;
		}
		.btn {
			display: flex;
			justify-content: flex-end;
			margin-top: 20rpx;
			.paymentBtn {
				width: 124rpx;
				height: 50rpx;
				border: 2rpx solid #2d4f43;
				font-size: 26rpx;
				border-radius: 10rpx;
				color: #2d4f43;
				text-align: center;
				line-height: 50rpx;
				margin-left: 32rpx;
			}
		}
	}
}
</style>
